﻿@inherits BInputBase<TValue>
@typeparam TValue
@{
    string isDisabledClass = string.Empty;
    if (IsDisabled)
    {
        isDisabledClass = " is-disabled";
    }

    var text = Formatter(Value);
    var isClearable = Value != default && IsClearable && (IsFocus || IsMouseOver);
    var cls = Cls;
    if (IsClearable)
    {
        cls += " el-input--suffix";
    }

}
<div class="el-input @cls @isDisabledClass" @ref="Content" style="@Style" @onclick="OnClick" @onmouseover="e => IsMouseOver = true" @onmouseout="e=>IsMouseOver=false">
    <input type="@Type.ToString().ToLower()" @ref="InputElement" @onclick="OnInputClick" placeholder="@Placeholder" value="@text" class="el-input__inner" @onfocus="e=>_=OnFocusAsync()" @onblur="e=>IsFocus=false" @onchange="OnChangeEventArgs" />
    @if (isClearable)
    {
        <span class="el-input__suffix">
            <span class="el-input__suffix-inner">
                <!---->
                <i class="el-input__icon el-icon-circle-close @(AdditionalClearIcon ?? "el-input__clear")" @onclick="ClearOnClick">
                </i><!----><!---->
            </span><!---->
        </span>
    }
    else
    {
        @if (!string.IsNullOrWhiteSpace(SuffixIcon))
        {
            <span class="el-input__suffix">
                <span class="el-input__suffix-inner">
                    <!---->
                    <i class="el-input__icon @SuffixIcon" @onclick="OnSuffixIconClick">
                    </i><!----><!---->
                </span><!---->
            </span>
        }
    }
    @if (!string.IsNullOrWhiteSpace(PrefixIcon))
    {
        <span class="el-input__prefix">
            <i class="el-input__icon @PrefixIcon" @onclick="OnPrefixIconClick"></i>
        </span>
    }
</div>